<!--
    数据大屏展示页面
-->
<template>
    <div class="sum">

        <!--手机端显示-->
        <div class="header" style="padding: 20px; text-align: center;" v-if="mobile">
            <h2 style="letter-spacing:6px;">
                医疗废物收运数据展板
            </h2>
        </div>

        <!--电脑端显示-->
        <header v-if="!mobile">
            <!--插槽-->
            <div style="text-align: right; padding-top:  0.2rem;">
                <slot></slot>
            </div>
            <h2 style="letter-spacing:6px;">医疗废物数据展板</h2>
            <div class="showTime">
                <span class="time">{{ nowTime }}</span>
                <span class="date">
                    <span>{{ date }} {{ week }}</span>
                </span>
            </div>
        </header>

        <!-- 左边数据统计 -->
        <section :class="mobile ? 'mainbox1' : 'mainbox'">

            <div class="item center" v-if="mobile">
                <div class="resume">
<!--                    <dv-border-box-8>-->
<!--                    </dv-border-box-8>-->
                    <div class="resume-hd">
                        <ul>
                            <li>
                                <countTo :startVal="startVal" :endVal="customerSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">家</span>
                            </li>
                            <li>
                                <countTo :startVal="startVal" :endVal="countWasteWeight" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">{{countWasteUnit}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="resume-bd">
                        <ul>
                            <li>服务机构数</li>
                            <li>医废总产量</li>
                        </ul>
                    </div>
                </div>
                <div class="map" style="text-align: right;">
                    <a-button ghost
                              style="color: #F5F5F5; border-color: #F5F5F5;z-index: 9999;margin-right: 10px;"
                              @click="clickBackMap" v-if="deepTree.length > 1">
                        <a-icon type="left"/>
                        {{' 返 回 '}}
                    </a-button>
                    <div class="chart chart_map" id="chart_map"></div>
                </div>
            </div>

            <!--左边数据统计-->
            <div class="item left">
                <div class="panel">
                    <h2>五种医疗废物历史产生总量</h2>
                    <histogram :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>三种机构类型废物产生量情况</h2>
                    <regulationType :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"
                                    :mwWeightSum="Number(mwWeightSum)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>医废实时提交展示</h2>
                    <recycle-table :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
            </div>

            <!-- 中间数据统计 电脑端 -->
            <div class="item center" v-if="!mobile">
                <div class="resume">
                    <div class="resume-hd">
                        <ul>
                            <li>
                                <countTo :startVal="startVal" :endVal="customerSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">家</span>
                            </li>
                            <li>
                                <countTo :startVal="startVal" :endVal="countWasteWeight" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">{{countWasteUnit}}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="resume-bd">
                        <ul>
                            <li>服务机构数</li>
                            <li>医废总产量</li>
                        </ul>
                    </div>
                </div>
                <div class="map" style="text-align: right;">
                    <a-button ghost
                              style="color: #F5F5F5; border-color: #F5F5F5;z-index: 9999;margin-right: 10px;"
                              @click="clickBackMap" v-if="deepTree.length > 1">
                        <a-icon type="left"/>
                        {{' 返 回 '}}
                    </a-button>
                    <div class="chart chart_map" id="chart_map"></div>
                    <div class="map1"></div>
                    <div class="map2"></div>
                </div>
            </div>

            <!-- 右边数据统计 -->
            <div class="item right">
                <div class="panel">
                    <h2>各区县产生量占比统计</h2>
                    <pie :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>近一年五种医疗废物产量</h2>
                    <yearly-output :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>机构近一个月产生量排名</h2>
                    <ranking :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
            </div>
        </section>

    </div>
</template>

<script>
    import { getAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin.js'
    import { WebsocketMixin } from '@/mixins/WebsocketMixin'

    import { getCityJSON, getDistrictsJSON, getProvinceJSON } from './common/get-json'
    import { cityProvincesMap } from './common/cityProvincesMap'
    import { mapOption } from './common/mapOption'
    import countTo from 'vue-count-to'

    import pie from '@/components/government/pie' // 各区县产生处置量占比统计
    import Histogram from '@/components/government/histogram' // 医疗废物总产量
    import regulationType from '@/components/government/regulationType' // 三种监管类型机构分布图
    import RecycleTable from '@/components/government/recycleTable' // 收运记录实时展示
    import YearlyOutput from '@/components/government/yearlyOutput'
    import Ranking from '@/components/government/ranking'

    export default {
        name: 'screenView',
        components: {
            Ranking,
            YearlyOutput,
            regulationType,
            RecycleTable,
            Histogram,
            pie,
            countTo
        },
        mixins: [mixinDevice, WebsocketMixin],
        data() {
            let areaName = '贵州省';
            let areaCode = '520000';
            let areaLevel = 'province';

            let user = this.$store.getters.userInfo;
            console.log("user",user)
            if(user){
                if(user.provinceCode){
                    areaLevel = 'province';
                    areaCode = user.provinceCode;
                    if(user.province){
                        areaName = user.province;
                    } else {
                        areaName = cityProvincesMap.provincesCode[areaCode]
                    }
                }
                if(user.cityCode){
                    areaLevel = 'city'
                    areaCode = user.cityCode;
                    if(user.city){
                        areaName = user.city;
                    } else {
                        areaName = cityProvincesMap.areaMap1[areaCode]
                    }
                }
                if(user.areaCode){
                    areaLevel = 'district'
                    areaCode = user.areaCode;
                    if(user.area){
                        areaName = user.area;
                    } else {
                        areaName = 'areaName'
                    }
                }
            }
            return {
                // socket 连接地址
                socketUrl: '/websocket/',
                chart: null, // 实例化echarts
                provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找对应json
                provincesCode: cityProvincesMap.provincesCode, // 市行政区划，用于查找对应json
                areaMap: cityProvincesMap.areaMap, // 省行政区划，用于数据的查找，按行政区划查数据
                cityMap: cityProvincesMap.areaMap1, // 省行政区划，用于数据的查找，按行政区划查数据
                mapData: [], // 当前地图上的地区
                deepTree: [],// 点击地图时push，点返回时pop
                areaName, // 当前地名
                areaCode, // 当前行政区划
                areaLevel, // 当前级别   province省   市city  区/县district
                nowTime: '',
                week: '',
                date: '',
                startVal: 0,
                guiYangData: [],
                customerSum: 0, // 服务机构数
                mwWeightSum: 0, // 医废总产量
                countWasteWeight: 0, // 医废总产量
                countWasteUnit: '千克',
                glassPlasticWeightSum: 0,
                dataStatus: '',
                areaDataObj: {},
                mapDataSource: [],
                dataSource: []
            }
        },
        computed: {
            mobile: function() {
                return this.isMobile()
            }
        },
        mounted() {
            // 获取时间
            this.nowTimes()
            // 获取地图
            this.$nextTick(() => {
                let params = {
                    areaName: this.areaName,
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                if(this.areaLevel == 'province'){
                    this.requestGetProvinceJSON(params)
                }
                else if(this.areaLevel == 'city'){
                    this.requestGetCityJSON(params)
                }
                else if(this.areaLevel == 'district'){
                    this.requestGetDistrictsJSON(params)
                }
                this.chart.on('click', this.echartMapClick)
            })

            //定时刷新地图动画
            if (this.timer1) {
                clearInterval(this.timer1)
            } else {
                // 10秒钟刷新一次
                let time = (1000 * 10)
                this.timer1 = setInterval(() => {
                    this.refreshChartMap(1)
                }, time)
            }
        },
        beforeDestroy() {
            clearInterval(this.timer)
            clearInterval(this.timer1)
        },
        methods: {
            getCustomerLevel: function(cus) {
                let level = 0
                if (cus) {
                    if (cus.supervise == 0) {
                        level = 1
                    }
                    if (cus.supervise == 1) {
                        level = 2
                    }
                    if (cus.supervise == 2) {
                        level = 3
                    }
                }
                return level
            },
            // -----------接收 socket 消息 ---------------
            websocketOnmessage: function(res) {
                console.log(' -----------接收 socket 消息 ---------------')
                // 接收用户提交的信息
                let result = JSON.parse(res.data);

                if (result.cmd == 'user') {
                    // 接收到socket 消息  newData = Object
                    let newData = JSON.parse(result.data)
                    let obj = {}
                    // 当前显示的是省级地图
                    if (this.areaLevel == 'province') {
                        this.mapDataSource.forEach((val, index) => {
                            // 显示省级地图，则是用cityCode来进行判断
                            if (newData.cityCode && (parseInt(newData.cityCode) == parseInt(val.areaCode))) {
                                obj = {
                                    name: val.areaName,
                                    code: val.areaCode,
                                    lat: val.properties.center,
                                    level: this.getCustomerLevel(newData),
                                    time: new Date().getTime()
                                }
                            }
                        })
                    }
                    // 当前显示的是市级地图
                    if (this.areaLevel == 'city') {
                        this.mapDataSource.forEach((val, index) => {
                            // 显示省级地图，则是用areaCode来进行判断
                            if (newData.areaCode && (parseInt(newData.areaCode) == parseInt(val.areaCode))) {
                                obj = {
                                    name: val.areaName,
                                    code: val.areaCode,
                                    lat: val.properties.center,
                                    level: this.getCustomerLevel(newData),
                                    time: new Date().getTime()
                                }
                            }
                        })
                    }
                    // 当前显示的是区/县地图
                    if (this.areaLevel == 'district' && (newData.areaCode == this.areaCode) && (newData.latitude && newData.longitude)) {
                        obj = {
                            name: newData.areaName,
                            code: newData.areaCode,
                            lat: [newData.longitude, newData.latitude],
                            level: this.getCustomerLevel(newData),
                            time: new Date().getTime()
                        }
                    }
                    let len = this.dataSource.length
                    if (obj && obj.code) {
                        let state = true
                        let time = new Date().getTime()
                        this.dataSource.forEach((val, index) => {
                            // 时间大于10秒
                            if ((val.code == obj.code) && ((time - val.time) > (1000 * 10))) {
                                this.dataSource[index] = val
                                state = false
                            }
                        })
                        // latitude 纬度， longitude 经度
                        if (state) {
                            if(newData.latitude && newData.longitude){
                                obj['lat'] = [newData.longitude,newData.latitude];
                            }
                            this.dataSource.push(obj)
                            // 发送通知
                            this.$notification.open({
                                key: 'customer_submit_waste',
                                message: `【${newData.customerName}】提交医疗废物通知`,
                                description: `【${newData.submitUserName}】正在提交 ${newData.wasteParentName || '医疗废物'}`,
                                placement: 'bottomRight',
                                duration: 10
                            })
                        }
                        if (this.dataSource.length != len) {
                            // 重新设置echart信息
                            let res = this.deepTree[this.deepTree.length - 1]['mapData']
                            this.setEchartsOption(this.areaName, res, res.features)
                        }
                    }
                }
            },
            // 加载省级地图
            requestGetProvinceJSON(params) {
                // console.log('省级地图params', params)
                // 调用获取省JSON接口(参数：areaCode(默认贵州省))
                let res = getProvinceJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                // 如果不存在，就往地图容器中添加数据
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                // 调用地图初始化方法
                this.initEchantsMap(params.areaName, res, res.features)

            },

            // 加载市级地图
            requestGetCityJSON(params) {
                // console.log('市级地图params', params)
                // 调用获取市JSON接口()
                console.log("市级地图",params.areaCode)
                let res = getCityJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                console.log('deepTree',this.deepTree);
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },

            // 加载区县级地图
            requestGetDistrictsJSON(params) {
                // console.log('县级地图params', params)
                let res = getDistrictsJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },

            // 地图点击
            echartMapClick(params) {
                // console.log('echartMapClick ==> ',params)
                let info = params.data
                if (info) {
                    this.areaName = info.areaName;
                    this.areaLevel = info.areaLevel;
                    this.areaCode = info.areaCode;

                    // if (info.areaName in this.provincesMap) {
                    //     this.areaCode = info.areaCode;
                    //     this.areaLevel = info.areaLevel;
                    //     //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
                    //     this.requestGetProvinceJSON({areaName: info.areaName, areaCode: info.areaCode});
                    // } else
                    // if (info.areaName in this.areaMap) {
                    //     //显示县级地图
                    //     this.requestGetCityJSON(info)
                    // } else {
                    //     this.requestGetDistrictsJSON(info)
                    // }
                } else {
                    let name = params.name
                    let item = null
                    this.mapDataSource.forEach((val) => {
                        if (val.name == name) {
                            item = val
                        }
                    })
                    if (item) {
                        let params = {
                            areaName: item.areaName,
                            areaLevel: item.areaLevel,
                            areaCode: item.areaCode
                        }
                        this.areaName = params.areaName
                        this.areaLevel = params.areaLevel
                        this.areaCode = params.areaCode

                        if (item.areaLevel == 'city') {
                            this.requestGetCityJSON(params)
                        }
                        if (item.areaLevel == 'district') {
                            this.requestGetDistrictsJSON(params)
                        }
                    }
                }
            },

            // 返回上一级地图页
            clickBackMap() {
                if (this.deepTree.length) {
                    this.deepTree.pop()
                    let info = this.deepTree[this.deepTree.length - 1]
                    let params = info.params

                    this.areaName = params.areaName
                    this.areaLevel = params.areaLevel
                    this.areaCode = params.areaCode

                    let areaName = params.areaName
                    let data = info.mapData
                    let mapData = data.features
                    this.initEchantsMap(areaName, data, mapData)
                }
            },

            initEchantsMap(map, res, data = []) {
                this.loadTimer = null;
                this.setEchartsOption(map, res, data)
                this.mapDataSource = this.initSeriesData(data)
            },

            // 初始化地图图表
            setEchartsOption: async function(map, res, data = []) {
                if (this.chart) {
                    this.chart.clear()
                }
                this.chart = this.$echarts.init(document.getElementById('chart_map'))
                this.$echarts.registerMap(map, res, data);

                this.getDataSource()
                let option = {
                    geo: {
                        map: map,
                        ...mapOption.geoOption
                    },
                    series: [{
                        ...mapOption.geoSeries,
                        data: this.initSeriesData(data)

                    }],

                }
                if (this.isMobile()) {
                    option['geo']['zoom'] = 1.2
                }
                this.chart.setOption(option)
            },
            initSeriesData: function(data) {
                let temp = []
                let geoMapData = this.dataSource
                data.forEach((item, index) => {
                    let obj = {}
                    obj['properties'] = item['properties']
                    obj['name'] = item['properties']['name']
                    obj['areaName'] = item['properties']['name']
                    obj['areaCode'] = item['properties']['adcode']
                    obj['areaLevel'] = item['properties']['level']
                    obj['value'] = [0, 0]
                    let geoInfo = geoMapData.find((v) => v.code == item['properties']['adcode'])
                    if (geoInfo) {
                        obj['geoInfo'] = geoInfo
                        obj['level'] = geoInfo['level']
                        obj['value'] = geoInfo['lat']
                    }
                    temp.push(obj)
                })

                return temp

            },

            /**
             * 定时刷新地图组件
             * @param timeLen 时长
             */
            refreshChartMap: function(timeLen = 1) {
                let time = new Date().getTime()
                let state = false
                this.dataSource.forEach((val, index) => {
                    // 当前时间戳 - 列表动画时间 > timeLen
                    // 时间戳转为秒 默认60秒
                    let t = (1000 * 10 * timeLen)
                    if ((time - val.time) > t) {
                        this.dataSource.splice(index, 1)
                        console.log('------------删除地图渲染动画-------------')
                        state = true
                    }
                })
                if (state) {
                    let res = this.deepTree[this.deepTree.length - 1]['mapData']
                    this.setEchartsOption(this.areaName, res, res.features)
                }

            },

            // =====顶部数据统计请求=====
            // 获取服务机构数
            getDataSource: function() {
                if(!this.loadTimer){
                    console.log('--------刷新数据 getDataSource ---------  ')
                    this.loadTimer = new Date().getTime();
                    let params = {
                        areaName: this.areaName,
                        areaLevel: this.areaLevel,
                        areaCode: this.areaCode
                    }
                    this.getCenter1Data(params)
                    this.getCenter2Data(params)
                }else{
                    let time = new Date().getTime()
                    // 时间戳转为秒 默认5分钟刷新一次
                    let timeLen = (1000 * 10 * 6 * 5);
                    if((time - this.loadTimer) > timeLen){
                        this.loadTimer = null;
                        this.getDataSource();
                    }
                }
            },

            async getCenter1Data(opt) {
                let params = {
                    ...opt,
                    state: 0
                }
                let res = await getAction('/hc/Statistical/getCustomerByRegion', params)
                if (res && res.success) {
                    this.customerSum = res.result
                }
                console.log('customerSum==>',this.customerSum)
            },

            // 获取医废总产量
            async getCenter2Data(opt) {
                let params = { ...opt }
                let url = '/hc/Statistical/getCountyWasteSum'
                let res = await getAction(url, params)
                if (res && res.success) {
                    let weight = parseFloat(res.result.sum || 0)
                    this.mwWeightSum = weight;
                    if (weight > 10000) {
                        this.countWasteWeight = (weight / 1000)
                        this.countWasteUnit = '吨'
                    } else {
                        this.countWasteWeight = weight
                        this.countWasteUnit = '千克'
                    }
                    console.log('this.mwWeightSum == > ',this.mwWeightSum)
                }
            },

            // 时间格式化
            timeFormate(timeStamp) {
                //显示当前时间
                let newDate = new Date(timeStamp)
                let weeks = ['日', '一', '二', '三', '四', '五', '六']
                this.week = '星期' + weeks[newDate.getDay()]
                this.date = newDate.Format('yyyy-MM-dd')
                this.nowTime = newDate.Format('hh:mm:ss')
            },

            nowTimes() {
                this.timeFormate(new Date())
                setInterval(this.nowTimes, 1000)
                this.clear()
            },

            clear() {
                clearInterval(this.nowTimes)
                this.nowTimes = null
            }
        }
    }
</script>

<style lang="less" scoped>
    @font-face {
        font-family: 'iconfont';
        src: url('//at.alicdn.com/t/font_2059552_7jpvy617m72.eot');
        src: url('//at.alicdn.com/t/font_2059552_7jpvy617m72.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.woff') format('woff'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.svg#iconfont') format('svg');
    }

    li {
        list-style: none;
    }

    @font-face {
        font-family: 'electronicFont';
        src: url('~@assets/styles/fonts/DS-DIGIT.TTF') format('truetype');
    }

    .sum {
        background: rgba(0, 0, 0, 0.3);
    }

    .header {
        h2 {
            font-size: 0.4rem;
            text-align: center;
            letter-spacing: 1px;
        }
    }

    header {
        position: relative;
        background: url(~@assets/img/back/head.png) no-repeat top center;
        background-size: 100% 135%;
        padding-bottom: 1px;

        h2 {
            color: #7ef0ff;
            font-size: 0.475rem;
            text-align: center;
            line-height: 0.75rem;
            letter-spacing: 1px;
            margin-top: -25px;
        }

        .showTime {
            position: absolute;
            left: 0.8rem;
            top: 0.2rem;
            color: rgba(126, 240, 255, 0.7);
            display: flex;
            align-items: center;

            .time {
                font-size: 0.28rem;
                margin-right: 0.18rem;
            }

            .date {
                span {
                    display: block;

                    &:nth-child(1) {
                        font-size: 0.12rem;
                        text-align: right;
                    }

                    &:nth-child(2) {
                        font-size: 0.14rem;
                    }
                }
            }
        }
    }

    .mainbox {
        min-width: 1024px;
        padding: 0.125rem 0.125rem 0;
        display: flex;

        .item {
            flex: 4;

            &.center {
                flex: 5;
                overflow: hidden;

                .resume {
                    background: rgba(101, 132, 226, 0.1);
                    padding: 0.1875rem;
                    margin: 0 0.125rem 0.1rem;

                    .resume-hd {
                        position: relative;
                        border: 1px solid rgba(25, 186, 139, 0.17);

                        ul {
                            display: flex;

                            .li-line {
                                content: '';
                                position: absolute;
                                height: 50%;
                                width: 1px;
                                background: rgba(255, 255, 255, 0.2);
                                top: 25%;
                            }

                            li {
                                position: relative;
                                flex: 1;
                                text-align: center;
                                height: 1.2rem;
                                line-height: 1.2rem;
                                font-size: 0.65rem;
                                color: #ffeb7b;
                                padding: 0.05rem 0;
                                // font-family: 'DIGITALDREAMFAT';
                                font-family: 'electronicFont';
                                font-weight: bold;

                                &:nth-child(2) {
                                    &:after {
                                        .li-line;
                                        right: 0;
                                    }

                                    &:before {
                                        .li-line;
                                        left: 0;
                                    }
                                }
                            }
                        }

                        &:before {
                            content: '';
                            position: absolute;
                            width: 30px;
                            height: 10px;
                            border-top: 2px solid #02a6b5;
                            border-left: 2px solid #02a6b5;
                            top: 0;
                            left: 0;
                        }

                        &:after {
                            content: '';
                            position: absolute;
                            width: 30px;
                            height: 10px;
                            border-bottom: 2px solid #02a6b5;
                            border-right: 2px solid #02a6b5;
                            right: 0;
                            bottom: 0;
                        }
                    }

                    .resume-bd {
                        ul {
                            display: flex;

                            li {
                                flex: 1;
                                height: 0.5rem;
                                line-height: 0.5rem;
                                text-align: center;
                                font-size: 0.225rem;
                                color: rgba(255, 255, 255, 0.7);
                                padding-top: 0.125rem;
                            }
                        }
                    }
                }
            }

            .map-style {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 6.475rem;
                height: 6.475rem;
                opacity: 0.3;
                background-size: 100% 100% !important;
            }

            .map {
                position: relative;
                height: 10.125rem;

                .chart {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    height: 10.125rem;
                    width: 100%;
                }

                .map1 {
                    .map-style;
                    background: url(~@assets/img/brand/map.png) no-repeat;


                }

                .map2 {
                    .map-style;
                    width: 7.0375rem;
                    height: 7.0375rem;
                    background-image: url(~@assets/img/brand/jt.png);
                    opacity: 0.6;
                    -webkit-animation: rotate 15s linear infinite;
                    animation: rotate 15s linear infinite;
                    z-index: 2;

                }
            }

            .panel {
                overflow: hidden;
                position: relative;
                height: 3.875rem;
                border: 1px solid rgba(25, 186, 139, 0.17);
                background: rgba(255, 255, 255, 0.04) url(~@assets/img/brand/line.png);
                padding: 0 0.1875rem 0;
                margin-bottom: 0.1875rem;

                &:before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid #02a6b5;
                    border-left: 2px solid #02a6b5;
                }

                &:after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid #02a6b5;
                    border-right: 2px solid #02a6b5;
                }

                .panel-footer {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;

                    &:before {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        content: '';
                        width: 10px;
                        height: 10px;
                        border-bottom: 2px solid #02a6b5;
                        border-left: 2px solid #02a6b5;
                    }

                    &:after {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        content: '';
                        width: 10px;
                        height: 10px;
                        border-bottom: 2px solid #02a6b5;
                        border-right: 2px solid #02a6b5;
                    }
                }

                h2 {
                    height: 0.6rem;
                    line-height: 0.6rem;
                    text-align: center;
                    color: #7ef0ff;
                    font-size: 0.225rem;
                    font-weight: 400;

                    a {
                        margin: 0 0.1875rem;
                        color: #fff;
                        text-decoration: none;
                    }
                }

                .chart {
                    height: 3rem;
                }
            }

            .panel-height {
                height: 7.9375rem;
            }

        }
    }

    .mainbox1 {
        padding: 0.125rem 0.125rem 0.125rem;

        .item {
            flex: 4;

            &.center {
                flex: 5;
                overflow: hidden;

                .resume {
                    background: rgba(101, 132, 226, 0.1);
                    padding: 0.1875rem;
                    margin: 0 0.125rem 0.1rem;

                    .resume-hd {
                        position: relative;
                        border: 1px solid rgba(25, 186, 139, 0.17);

                        ul {
                            display: flex;

                            .li-line {
                                content: '';
                                position: absolute;
                                height: 50%;
                                width: 1px;
                                background: rgba(255, 255, 255, 0.2);
                                top: 25%;
                            }

                            li {
                                position: relative;
                                flex: 1;
                                text-align: center;
                                height: 1.2rem;
                                line-height: 1.2rem;
                                font-size: 0.65rem;
                                color: #ffeb7b;
                                padding: 0.05rem 0;
                                // font-family: 'DIGITALDREAMFAT';
                                font-family: 'electronicFont';
                                font-weight: bold;

                                &:nth-child(2) {
                                    &:after {
                                        .li-line;
                                        right: 0;
                                    }

                                    &:before {
                                        .li-line;
                                        left: 0;
                                    }
                                }
                            }
                        }

                        &:before {
                            content: '';
                            position: absolute;
                            width: 30px;
                            height: 10px;
                            border-top: 2px solid #02a6b5;
                            border-left: 2px solid #02a6b5;
                            top: 0;
                            left: 0;
                        }

                        &:after {
                            content: '';
                            position: absolute;
                            width: 30px;
                            height: 10px;
                            border-bottom: 2px solid #02a6b5;
                            border-right: 2px solid #02a6b5;
                            right: 0;
                            bottom: 0;
                        }
                    }

                    .resume-bd {
                        ul {
                            display: flex;

                            li {
                                flex: 1;
                                height: 0.5rem;
                                line-height: 0.5rem;
                                text-align: center;
                                font-size: 0.225rem;
                                color: rgba(255, 255, 255, 0.7);
                                padding-top: 0.125rem;
                            }
                        }
                    }
                }
            }

            .map-style {
                transform: translate(-50%, -50%);
                width: 6.475rem;
                height: 6.475rem;
                opacity: 0.3;
                background-size: 100% 100%;
            }

            .map {
                height: 10rem;

                .chart {
                    z-index: 5;
                    height: 10.5rem;
                    width: 100%;
                }
            }

            .panel {
                overflow: hidden;
                position: relative;
                height: 4.2rem;
                border: 1px solid rgba(25, 186, 139, 0.17);
                background: rgba(255, 255, 255, 0.04) url(~@assets/img/brand/line.png);
                padding: 0 0.1875rem 0;
                margin-bottom: 0.1875rem;

                &:before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid #02a6b5;
                    border-left: 2px solid #02a6b5;
                }

                &:after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid #02a6b5;
                    border-right: 2px solid #02a6b5;
                }

                .panel-footer {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;

                    &:before {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        content: '';
                        width: 10px;
                        height: 10px;
                        border-bottom: 2px solid #02a6b5;
                        border-left: 2px solid #02a6b5;
                    }

                    &:after {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        content: '';
                        width: 10px;
                        height: 10px;
                        border-bottom: 2px solid #02a6b5;
                        border-right: 2px solid #02a6b5;
                    }
                }

                h2 {
                    height: 0.6rem;
                    line-height: 0.6rem;
                    text-align: center;
                    color: #7ef0ff;
                    font-size: 0.225rem;
                    font-weight: 400;

                    a {
                        margin: 0 0.1875rem;
                        color: #fff;
                        text-decoration: none;
                    }
                }

                .chart {
                    height: 3rem;
                }
            }

            .panel-height {
                height: 7.9375rem;
            }

        }
    }


    @-webkit-keyframes rotate {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(-360deg);
        }
    }

    @keyframes rotate {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(-360deg);
        }
    }

    @media screen and (max-width: 1024px) {
        html {
            font-size: 42px !important;
        }
    }

    @media screen and (min-width: 1920) {
        html {
            font-size: 80px !important;
        }
    }
</style>
